<template>
  <div class="Header_h">
    <el-container>
      <el-header>
        <el-row :span="20">
          <el-menu
              :default-active="activeIndex"
              class="el-menu-demo"
              mode="horizontal"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b">
            <el-menu-item><el-link href="/blogs"><img src="../assets/logo.png" width="50px"></el-link></el-menu-item>
            <el-menu-item index="1">首页</el-menu-item>
            <el-col :span="6">
              <el-link href="/blog/add"><el-menu-item index="2">文章发表</el-menu-item></el-link>
            </el-col>
            <el-col :span="6">
              <el-menu-item index="3">文章详情</el-menu-item>
            </el-col>
            <el-col :span="6">
              <el-submenu index="4">
                <template #title>个人中心</template>
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-avatar :size="50" :src="user.avatar"></el-avatar>
                  </el-col>
                  <el-col :span="16">
                    <div>{{ user.username }}</div>
                  </el-col>
                </el-row>
                <el-row :span="20">
                  <el-col :span="10" :offset="2">
                    <el-menu-item index="4-1">修改</el-menu-item>
                  </el-col>
                  <el-col :span="10">
                    <el-link href="/login"><el-menu-item index="4-2" v-show="!hasLogin">登录</el-menu-item></el-link>
                    <el-link @click="loginOut"><el-menu-item index="4-2" v-show="hasLogin">退出</el-menu-item></el-link>
                  </el-col>
                </el-row>
              </el-submenu>
            </el-col>
          </el-menu>
        </el-row>
      </el-header>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      activeIndex: '1',
      user: {
        username: '请先登录',
        avatar: 'circleUrl'
      },
      hasLogin: false
    }
  },
  methods: {
    loginOut() {
      const _this = this
      _this.$axios.get("/loginOut", {
        headers: {
          "Authorization": localStorage.getItem("token")
        }
      }).then(res => {
        _this.$store.commit("REMOVE_INFO")
        _this.$router.push("/login")
      })
    }
  },
  created() {
    if (this.$store.getters.getUser.username) {
      this.user.username = this.$store.getters.getUser.username
      this.user.avatar = this.$store.getters.getUser.avatar

      this.hasLogin = true
    } else if (this.$store.getters.getUser.username == null) {
      console.log("你还未登录");
    }
  }
}
</script>

<style scoped>
.Header_h {
  margin: 0 0 25px auto;
  width: 100%;
  text-align: center;
}
.el-col{
  text-align: center;
}
</style>